<template>
	<div class="jd618">
		
		<header class="navigation" v-if="type == 'wap'">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>全品类大促</div>
			<div></div>	
		</header>
		
		<div class="header">
			<img :src="list.topImg">
		</div>
		
		<div class="coupon">
			<div v-for="item in list.couponlist">
					<img :src="item.img" @click="discounts(item.imgUrl)">
			</div>
		</div>
		
		<div class="title">
			<p>
					<div></div>
						{{list.titleOne}}
					<div></div>
			</p>
		</div>
		
		<div class="play">
			
			
			<mt-swipe :auto="4000" style='width: 100%;height: 2.25rem;'>
			  <mt-swipe-item v-for='item in list.goodslist' >
			  	<img :src="item.img" @click="commodity (item.imgUrl)">
			  </mt-swipe-item>
			</mt-swipe>
		
			
		</div>
		
		
		<div class="title">
			<p>
				<div></div>
					{{list.titleTwo}}
				<div></div>
			</p>
		</div>
		
		<div class="SPlist">
			
			
				
				<div class="SP" v-for='item in gslist' @click="jd(item.id,item.couponMoney)">
					
					<div class="Simg">
						<img :src="item.mainImageUrl">
						<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					</div>
					<h5>{{item.goodsName}}</h5>
					<div class="SJ">
						<div> <span>原价￥{{item.price}}</span> / 降￥{{item.couponMoney}}</div>
					</div>
					<div class="conPrice">现价￥{{item.conPrice}}</div>
					<div class="promptly">立即购买</div>
					
				</div>
				
				<!--<div class="SP">
					
					<div class="Simg">
						<img src="../assets/618/618_01.jpg">
					</div>
					<h5>撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘撒花姑娘</h5>
					<div class="SJ">
						<div>￥1399</div>
						<div><img src="../assets/618/gwh.jpg"></div>
					</div>
					
				</div>-->
				
				
			
		</div>
		
	</div>
</template>

<script>
	import { Swipe, SwipeItem } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return{
				list:[],
				gslist:[],
				appId:'',
				token:'',
				Id:'',
				length:'',
				type:''
			}
		},
		created(){
			this.appId = this.$route.query.appId;
			this.token = this.$route.query.token;
			this.Id = this.$route.query.id;
			this.type = this.$route.query.type;
			//顶部
			var url = BaseUrl + "market/festivel/topinfo?id=" + this.Id + "&token=" + this.token + "&appId=" + this.appId
			this.$http.get(url).then(res => {
				if(res.data.code == "10000") {
//					console.log(res)
					this.list = res.data.data
					this.length = res.data.data.couponlist.length
				}
			})
			
			//商品
			var url = BaseUrl + "market/festivel/goods?id=" + this.Id
			this.$http.get(url).then(res => {
				if(res.data.code == "10000") {
//					console.log(res.data.data)
					this.gslist = res.data.data
				}
			})
			
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1)
			},
			discounts:function(val){
				var match = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/
				if(match.test(val)){
					window.location.href  = val
				}else{
					Toast({
						message: "为找到链接",
						position: 'middle',
						duration: 3000
					})
				}
				
			},
			commodity:function(val){
				var match = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/
				if(match.test(val)){
					window.location.href = val
				}else{
					Toast({
						message: "为找到链接",
						position: 'middle',
						duration: 3000
					})
				}
			},
			jd:function(id,couponMoney){
				var jdurl;
//				this.token = localStorage.setItem('yunId', this.token);
				
				if(couponMoney == 0){
					jdurl = BaseUrl + "jd/getUrl?appId=" + this.appId + "&spuId=" + id + "&token="+ this.token
				}else{
					jdurl = BaseUrl + "jd/getConUrl/?appId="+this.appId + "&spuId=" + id + "&token=" + this.token
				}
				
				this.$http.get(jdurl).then(res => {
					if(res.data.code == "10000") {
						if(res.data.data != ''){
							window.location.href = res.data.data
						}else{
							this.$router.push({
								path: '/couponEmpty?' + "id=" + id 
							})
						}
					} 

				})
				
				
			}
		}
	}
	
	
</script>

<style scoped="scoped">
	.jd618{
		background: #942124;
	}
	
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.header img{
		width: 100%;
		height: 4.84rem;
		display: block;
	}
	.coupon{
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 15px;
		padding:0 0.1rem;
	}
	.coupon img{
		float: left;
		width: 33%;
	}
	.title{
		display: flex;
		justify-content: space-around;
		justify-content: center;
		text-align: center;
		align-items: center;
		color: #fed3a0;
		font-size: 0.3rem;
		padding: 0.3rem 0;
	}
	.title div{
		width: 0.3rem;
		height: 0.3rem;
		margin: 0 0.2rem;
		border-radius: 50%;
		background: linear-gradient(-45deg, #fff7f3, #ff6320,#fff7f3, #ff6320,#fff7f3, #ff6320);
	}
	.play{
		width: 100%;
		height: 2.25rem;
		display: flex;
		padding: 0 0.2rem;
		justify-content: space-between;
	}
	.play img{
		width: 100%;
		height: 2.25rem;
	}
	.SPlist{
		padding: 0 0.2rem;
		overflow: hidden;
	}
	.SP{
		width: 49%;
		float: left;
		background: #FFFFFF;
		padding: 0.2rem;
		box-sizing: border-box;
		margin-bottom: 0.2rem;
	}
	.SP:nth-child(odd){
		margin-right: 2%;
	}
	.Simg img{
		width:100%;
		height: 2.8rem;
		display: block;
		margin: 0.2rem 0 0.4rem 0;
	}
	.SP h5{
		height: 0.8rem;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-height: 1.5;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.25rem;
		color: #9b9b9b;
		margin-bottom: 0.2rem;
		font-weight: normal;
	}
	.SJ{
		display: flex;
		justify-content: space-between;
	}
	.SJ div{
		color: #ff2040;
		font-size: 0.2rem;
	}
	.SJ div span{
		text-decoration: line-through;
		font-size: 0.18rem;
		color: #9b9b9b;
	}
	.conPrice{
		font-size: 0.25rem;
		color: #ff2040;
	}
	.promptly{
		text-align: center;
		padding:0.1rem 0.2rem;
		border-radius: 0.4rem;
		background: #ff2040;
		color: #fff;
		font-size: 0.2rem;
		font-weight: bold;
		margin-top: 0.2rem;
	}
	.jdSymbol {
	width: 0.67rem;
	height: 0.67rem;
	background: url(../assets/jd.png);
	background-size: 100% 100%;
	display: block;
	position: relative;
	margin-top: -0.755rem;
	float: right;
}
</style>